<script setup>
import { useRoute } from 'vue-router'
import LfTabs from '@/components/commonUI/LfTabs.vue'
import FansList from './components/FansList/FansList.vue'
import { userCenterStore } from '@/stores/userCenterStore'
import PostList from './components/PostList/PostList.vue'
import FollowList from './components/FollowList/FollowList.vue'
import { useUserInfoQuery } from '@/composables/useUserInfoQuery'
import UserHomeInfo from './components/UserHomeInfo.vue'
import TopicList from './components/TopicList/TopicList.vue'
import ContainerSplitOrFull from '@/components/commonUI/ContainerSplitOrFull.vue'
import { ref, watch } from 'vue'
const topicList = [
  { id: 1, name: '帖子', type: '1' },
  { id: 2, name: '粉丝', type: '2' },
  { id: 3, name: '关注', type: '3' },
  { id: 4, name: '主题', type: '4' },
  { id: 5, name: '关注帖子', type: '5' },
]

const route = useRoute()

const routeUid = ref(route.params.uid)

console.log(route.query.activeIndex);


const { userInfo } = useUserInfoQuery(routeUid)

watch(route, (newRoute, oldRoute) => {
  routeUid.value = newRoute.params.uid
})

const store = userCenterStore()

if (route.query.activeIndex) {
  store.setActiveIndex(Number(route.query.activeIndex))
}
watch(route, (newVal) => {
  // console.log(newVal);
  store.setActiveIndex(Number(store.activeIndex))

  
})
</script>

<template>
  <ContainerSplitOrFull>
    <div class="p-4 max-w-[1600px] mx-auto">
      <UserHomeInfo :userInfo="userInfo" />
      <div>
        <LfTabs :activeIndex="store.activeIndex" :tabOptions="topicList" :onTopicClick="store.setActiveIndex" />
        <div class="py-4">
          <PostList topicExplore="list" :type="1" :isEdit="true"  v-if="store.activeIndex === 0" />
          <FansList v-if="store.activeIndex === 1" />
          <FollowList v-if="store.activeIndex === 2" />
          <TopicList v-if="store.activeIndex === 3" />
          <PostList :type="2" v-if="store.activeIndex === 4" />

        </div>
      </div>
    </div>
  </ContainerSplitOrFull>
</template>
